<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
         }
         .q{
              width: 600px;
              height: 300px;
              background-color: pink;
              border: 1px solid #ebebeb;
              /* float: left;   */
              /* overflow: hidden; */
              margin: 0px auto;
         }
         .r{
              width: 600px;
              height: 60px;
              background-color: rgb(91, 229, 247);
              border: 1px solid #ebebeb;
              margin: 0 auto;
              text-align: center;
              line-height: 60px;
              font-size: 30px;
         }
         .w{
             width: 299px;
             height: 60px;
             background-color: lightblue;
             border: 1px solid #ebebeb; 
             float: left;
             position: relative;
             line-height: 60px;
             text-align: center;
         }
         ul{
            width: 299px;
             position: absolute;
             top: 60px;
             left: 0px;
             text-align: center;
         }
         li{
             font-size: 18px;
         }
         li:hover{
             background-color: lightgreen;
         }
    </style>
</head>
<body>
    <div class="q">
        <div class="w one">
            <span>菜单</span>
            <ul style="display: none;">
                <li>选项一</li>
                <li>选项二</li>
                <li>选项三</li>
                <li>选项四</li>
            </ul>
        </div>
        <div class="w two">
            <span>样式</span>
            <ul style="display: none;">
                <li>订单一</li>
                <li>订单二</li>
                <li>订单三</li>
                <li>订单四</li>
            </ul>
        </div>
       
    </div> 
    <div class="r">请选择</div>
    <script src="jQuery.js"></script>
    <script>
        $('.one').mouseenter(function(){
            $('.one span').next().css({  display:"block",});
            $('.two span').next().css({  display:"none",});
            $('.one li').click(function(){
                console.log(this);
                $('.r').html($(this).html());
                $('.one span').next().css({  display:"none",});
            });
        });
        $('.two').mouseenter(function(){
            $('.two span').next().css({  display:"block",});
            $('.one span').next().css({  display:"none",});
            $('.two li').click(function(){
                $('.r').html($(this).html());
                $('.two span').next().css({  display:"none",});
            });
        });
    </script>
</body>
</html>